<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSX语法</title>
    <!--    react.js的核心文件, 支持react语法-->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <!--    react-dom.js 支持react有关的DOM操作-->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!--    jsx-->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script type="text/babel">
    /*
    JSX语法注意点:
    1,JSX语法结构可以被包裹在小括号里,小括号也可以不写
    2,jsx里的注释比较特殊(是新的一种形式)
    3,在JSX里可以通过{}嵌入表达式或者变量
    4,如果JSX里的标签是单标签,注意啦!最后一定要以/结尾,不然会报错!
    5,jsx结构有且只有一个根标签
    * */
    let app=document.getElementById("app");
    //定义变量
    let a=10;
    let b=20;
    let name='村花';
    let el1=<ul>
        <li>{a+b}</li>
        <li>你的名字是{name}</li>
        <li>a和b的最大值是:{a>b? a:b}</li>

    </ul>
    ReactDOM.render(el1,app);
//    方式二
    ReactDOM.render(
        <div>
            {/* 注释*/}
            <ul><li>{name}</li>
        <li><input type="text"/></li>
            <li>{123+b}</li>
        </ul>
        </div>
    ,app);
//    加入有一组数据
    /*
    react 中列表的渲染
    建议使用map方法进行遍历数组以及返回想要渲染的jsx标签!
    react要求,列表渲染标签的时候需要设置key属性给标签做唯一标识,建议以后使用的数据集合中某个对象的唯一值作为key值(数字或者字符串都可以)
    * */
    let cityArray=["郑州","杭州","广州",'苏州','苏州'];
    ReactDOM.render(<ul>
        {cityArray.map((v,i)=>{
            return <li key={i}>{v}</li>
        })}
    </ul>,app);
    function fullname(firstName,lastName){
        return  firstName+ ","+lastName
    };
    ReactDOM.render(<div>
        {fullname("李明","小拉手")}
    </div>,app)

    /*
    class 本类名 extends 父类名{
    属性--constructor---不需要手动调用--创建对象自动执行
    方法--就是普通的自定义方法methods
    }
    * */
    // 一般写法 class child1 extends React.Component;
    let  {Component}=React;
    class Child1 extends Component{
        render() {
            return <ul>
            <li>{this.props.name}</li>
                <li>{this.props.age}</li>
            </ul>
        }
    }
    ReactDOM.render(<Child1 name="lily" age="18" />,app)




</script>